<template>
  <Page :name="title" :loading="loading">
    <a href="javascript:;" slot="left" class="header-close" @click="close"><i class="css-close"></i></a>
    <a href="javascript:;" slot="right" class="header-link" @click="prev" v-show="!loading && showPrev">上一步</a>
    <div class="page-complete-info">
      <nuxt-child
      @loading="item=>this.loading=item"
      @setTitle="title=>this.title=title"
      @submit="postData"
      />
    </div>
  </Page>
</template>

<script>
import Page from '~/components/page';

export default {
  components:{
    Page
  },
  data(){
    return {
      loading:false,
      title:'完善资料',
      needAddClass:false,
      pageInfo:null,
    }
  },
  computed:{
    step(){
      return this.$store.state.completeInfo.step
    },
    showPrev(){
      return this.step!=='complete_info' && this.step !== 'complete_info-org' && this.step !== 'complete_info-user';
    }
  },
  async mounted(){
    window.onbeforeunload = this.unloadHandle

    //设置class
    let classList = document.querySelector('body').classList;
    if(!classList.contains('bg-white')){
      this.needAddClass = true;
      classList.add('bg-white');
    }

    // await this.getCompleteInfo();
    //如果是lema客户端打开需要暴露token通信方法
    if(navigator.userAgent.match('lema')){
      // window.JSInterface2Java.getToken = ()=>{
      //   return  this.$store.state.token
      // }
      window.setToken = (token)=>{
        return this.$store.commit('SET_TOKEN',token)
      }
    }
  },
  destroyed(){
    window.onbeforeunload = function(){};
    this.$store.commit('completeInfo/setStep','complete_info')

    //清楚class
    if(this.needAddClass){
      document.querySelector('body').classList.remove('bg-white')
    }
  },
  methods:{
    async getCompleteInfo(){
      if(this.loading) return false;
      this.loading = true;
      try{
        let {data:rs} = await this.$axios.post('?ct=api&ac=get_complete_info',{
          step:3,
        })
        if(rs.code == 0){
          this.pageInfo = rs.data;
          this.$store.commit('completeInfo/setPageInfo',rs.data);
        }else{
          this.$toast(rs.msg);
        }

        //成功或失败都需要调用app端token
      }catch(e){
        this.$error(e);
      }
      this.loading = false;
    },
    async postData(param,cb){
      if(this.loading) return false;
      this.loading = true;
      try{
        let {data:rs} = await this.$axios.post('?ct=api&ac=complete_info',param)
        if(rs.code == 0){
          typeof cb === 'function' && cb();
        }else{
          this.$toast(rs.msg);
        }
        //每次提交后需要提供token给app
        if(this.$tools.isLema){
          if(this.$tools.isIOS){
            console.log('ios getToken')
            window.webkit.messageHandlers.getToken.postMessage(rs.token);
          }else if(this.$tools.isAndroid){
            console.log('android refreshToken')
            window.JSInterface2Java.refreshToken(rs.token);
          }
        }
      }catch(e){
        this.$error(e);
      }
      this.loading = false;
    },
    unloadHandle(){
      return "你确定要离开吗?";
    },
    close(){
      if(this.$tools.isLema){
        if(this.$tools.isIOS){
          console.log('ios closejclick true')
          window.webkit.messageHandlers.closejclick.postMessage(true);
        }else if(this.$tools.isAndroid){
          console.log('android closePage 1')
          window.JSInterface2Java.closePage(1);
        }
      }else{
        this.$alert({
          title:'确定要退出完善资料？',
          cancel:true,
          cancelText:'继续填写',
          okText:'退出'
        }).then(rs=>{
          this.$router.replace({name:'wealth',query:{tab:2}});
        })
      }

    },
    prev(){
      this.$router.back();
    }
  }
}
</script>

<style lang="less" scoped>
.page-complete-info {
  padding-bottom:120px;
  /deep/ .section {
    padding:30px;
  }
  /deep/ .com-item-box {
    .com-radio {
      min-width:120px;
      margin-right: 60px;
    }
  }
  /deep/ .com-checkbox {
    margin-right:30px;
  }
  /deep/ .page-footer {
    position: fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1;
    .btn {
      border-radius: 0;
    }
  }

/deep/ select {
    position: relative;
    display: block;
    width:100%;
    height: 44px;
    line-height: 44px;
    border: none;
    outline: none;
    font-size: 30px;
    -webkit-appearance: none;
    background-color:transparent;
    background-image:url('~assets/img/icon-select.png');
    background-size:19px 12px;
    background-position: center right;
    background-repeat: no-repeat;
  }

  /deep/ .upload-group {
    margin-top:-30px;
    .upload-box {
      margin-right:30px;
      margin-top:30px;
    }
  }

}

/deep/ .popup-tip-modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .popup-tip-box {
    position: relative;
    padding:80px 40px 40px;
    width:620px;
    background-color:#fff;
    border-radius: 10px;
    text-align: center;

    &::before {
      content: '';
      position: absolute;
      left:50%;
      top:0;
      transform: translate(-50%,-50%);
      width:100px;
      height: 100px;
      border-radius: 50%;
      border:6px solid #fff;
      background-color: #0cbc08;
      background-image:url('~assets/img/icon-check.png');
      background-size:48px 39px;
      background-position: center;
      background-repeat: no-repeat;
    }
  }
  .title {
    margin-bottom:16px;
    font-size:34px;
    color:#292929;
  }
  .sub-title {
    font-size:24px;
    color:#d39b00;
    margin-bottom:40px;
  }
  .content {
    text-align: center;
    font-size:28px;
    line-height: 40px;
    color:#999;
    margin-bottom:40px;
  }
  .btn-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .btn {
      flex:1;
    }
    .btn + .btn {
      margin-left:20px;
    }
  }
}

.header-close,
.header-link {
  position: absolute;
  top:0;
  height:100%;
  padding:0 30px;
  color:@color-primary;
  font-size:30px;
}
.header-close {
  display: flex;
  align-items: center;
  justify-content: center;
  left:0;
  .css-close{
    width:40px;
    height:40px;
    &::before,
    &::after {
      background-color:@color-primary;
    }
  }
}
.header-link {
  right:0;
}
</style>


